<template>
    <div class="log-in">
        <div class="left"></div>
        <div class="right">
            <div class="header"></div>
            <el-tabs v-model="activeLog" @tab-click="tabLogHandle">
                <el-tab-pane label="账户密码登录" name="accont">
                    <!-- 账户密码登录 -->
                    <el-form
                        :model="accountForm"
                        status-icon
                        :rules="accontRules"
                        ref="accountForm"
                        label-width="100px"
                        class="log-ruleForm"
                    >
                        <el-form-item label="" prop="username">
                            <el-input
                                placeholder="供应商号码"
                                v-model="accountForm.username"
                                autocomplete="on"
                            ></el-input>
                        </el-form-item>
                        <el-form-item label="" prop="password">
                            <el-input
                                type="password"
                                placeholder="密码"
                                v-model="accountForm.password"
                                autocomplete="off"
                                @keyup.native.enter="submitAccontForm('accountForm')"
                                prefix-icon="el-icon-lock"
                            ></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button class="submitBtn" type="primary" @click="submitAccontForm('accountForm')">
                                登录
                            </el-button>
                        </el-form-item>
                    </el-form>
                </el-tab-pane>
                <el-tab-pane label="手机号登录" name="phone">
                    <!-- 手机号登录 -->
                    <el-form
                        :model="phoneForm"
                        status-icon
                        :rules="phoneRules"
                        ref="phoneForm"
                        label-width="100px"
                        class="log-ruleForm"
                    >
                        <el-form-item label="" prop="phoneNumber">
                            <el-input
                                placeholder="手机号"
                                v-model="phoneForm.phoneNumber"
                                autocomplete="off"
                            ></el-input>
                        </el-form-item>
                        <!-- 图形验证码 -->
                        <el-form-item label="" prop="imgCode" style="position: relative">
                            <el-input
                                placeholder="图形验证码"
                                v-model="phoneForm.imgCode"
                                autocomplete="off"
                            ></el-input>
                            <!--              <span class="img-code" @click="getImgCode" v-show="!imgCode"-->
                            <!--                >获取图形码</span-->
                            <!--              >-->
                            <img class="img-code" @click="handleImgCode" :src="imgCode" />
                        </el-form-item>
                        <!-- 手机验证 -->
                        <el-form-item class="verify-wrap" label="" prop="vertifyCode">
                            <el-input
                                class="input-code vertify-code"
                                placeholder="验证码"
                                @keyup.native.enter="submitPhoneForm('phoneForm')"
                                v-model.number="phoneForm.vertifyCode"
                            ></el-input>
                            <span class="get-code" @click="getVertifyCode">获取验证码</span>
                        </el-form-item>

                        <el-form-item>
                            <el-button class="submitBtn" type="primary" @click="submitPhoneForm('phoneForm')">
                                登录
                            </el-button>
                        </el-form-item>
                    </el-form>
                </el-tab-pane>
            </el-tabs>
            <p class="authorize">顺丰速运 版权所有 Copyright &\#169 2013 sf-express.com Inc. All rights reserved.</p>
        </div>
    </div>
</template>

<script>
import Login from './Login.js';
export default {
    ...Login
};
</script>

<style scoped lang="less">
@import './Login.less';
</style>
